import React, {Component} from 'react';
import './UserNoticeList.css';
//蚂蚁导包
import {Button, Modal, List, Table,} from 'antd';

/**蚂蚁弹出层默认数据 **start**/
const newsData = [
    [
        '题目:1',
        '正文：这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例 ',
        '作者：1',
        '发布时间:2017/7/28 14:25',
    ],
    [
        '题目:2',
        '正文：这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例 ',
        '作者：2',
        '发布时间:2017/7/28 14:25',
    ],
    [
        '题目:3',
        '正文：这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例这是一个测试案例 ',
        '作者：3',
        '发布时间:2017/7/28 14:25',
    ]
];
/**蚂蚁弹出层默认数据 **end**/

/** 蚂蚁表格默认数据  **start**/
const {Column} = Table;
// 表格中的行数据
// {key+1}表示行数
// title=标题
// news_level=新闻等级
// effective_time=生效时间
// failure_time=失效时间
// publish_time=发布时间
// state=状态
const tableData = [
    {
        title: '水泥模板1',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板2',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板3',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板4',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板5',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板6',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板7',
        news_level: '重要',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
];
/** 蚂蚁表格参数  **end**/

export default class UserNoticeList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 蚂蚁参数
            newsData: newsData,
            visible: false,
            // 蚂蚁表格参数
            // 当前页面
            pagination: {pageSize: 4},
            //提示框数据
            tableData: tableData,
        }
    }

    // /** 初始化渲染**/
    // componentDidMount() {
    //     var jsonData = {
    //         // "comp_name": this.state.data[0],
    //     };
    //
    //     fetch("http://localhost:8080/questionnaires/diaoyan/add", {
    //         method: 'POST', // or 'PUT'
    //         body: JSON.stringify(jsonData), // data can be `string` or {object}!
    //         headers: new Headers({
    //             'Content-Type': 'application/json'
    //         })
    //     }).then(res => res.json())
    //         .catch(error => console.error('Error:', error))
    //         .then(response => console.log('Success:', response));
    // }

    /** 蚂蚁弹出表单函数 **start**/
    showModal = (text, record, index) => {
        console.log(text);
        console.log(record);
        console.log(index);
        Modal.info({
            title: '通知',
            content: (
                <List
                    style={{width: '350px', marginTop: '25px',}}
                    bordered
                    dataSource={this.state.newsData[index]}
                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
            ),
            okText: "确定",
            maskClosable: true,
            width: '500px',
        });
        this.setState({visible: true});
    };
    /** 蚂蚁弹出表单函数 **end**/

    /** 蚂蚁表格函数 **start**/
    // handleTableChange = (pagination, filters, sorter) => {
    //     // pagination	分页器，参考配置项或 pagination，设为 false 时不展示和进行分页	object
    //     // filters	表头的筛选菜单项	object[]  --colume属性
    //     // sorter	排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true	Function|boolean  --colume属性
    //     const pager = {...this.state.pagination};
    //     pager.current = pagination.current;
    //     this.setState({
    //         pagination: pager,
    //     });
    //     this.fetch({
    //         results: pagination.pageSize,
    //         page: pagination.current,
    //         sortField: sorter.field,
    //         sortOrder: sorter.order,
    //         ...filters,
    //     });
    // };
    //
    // fetch = (params = {}) => {
    //     console.log('params:', params);
    //     this.setState({ loading: true });
    //     reqwest({
    //         url: 'https://randomuser.me/api',
    //         method: 'get',
    //         data: {
    //             results: 10,
    //             ...params,
    //         },
    //         type: 'json',
    //     }).then((data) => {
    //         const pagination = { ...this.state.pagination };
    //         // Read total count from server
    //         // pagination.total = data.totalCount;
    //         pagination.total = 200;
    //         this.setState({
    //             loading: false,
    //             data: data.results,
    //             pagination,
    //         });
    //     });
    // }
    //
    // componentDidMount() {
    //     this.fetch();
    // }
    /** 蚂蚁表格函数 **end**/

    render() {
        return (
            <div id="User_list">
                <div className="col-md-12 col-sm-12">
                    <h2>通知列表</h2>
                    <h4>您可以查看最新的信息通知。</h4>
                    {/**蚂蚁表格**/}
                    <Table
                        // 表格数据
                        dataSource={this.state.tableData}
                        // 分页、排序、筛选变化时触发  Function(pagination, filters, sorter)
                        // onChange={this.handleTableChange}
                        // 每页条数
                        pagination={this.state.pagination}
                    >
                        <Column
                            title="标题"
                            dataIndex="title"
                            key="a"
                        />
                        <Column
                            title="新闻等级"
                            dataIndex="news_level"
                            key="b"
                        />
                        <Column
                            title="生效时间"
                            dataIndex="effective_time"
                            key="c"
                        />
                        <Column
                            title="失效时间"
                            dataIndex="failure_time"
                            key="d"
                        />
                        <Column
                            title="发布时间"
                            dataIndex="publish_time"
                            key="e"
                        />
                        <Column
                            title="状态"
                            dataIndex="state"
                            key="f"
                        />
                        <Column
                            title="操作"
                            dataIndex="action"
                            key="g"
                            render={(text, record, index) => (/**参数分别为当前行的值，当前行数据，行索引**/
                                <Button type="primary" onClick={() => this.showModal(text, record, index)}>查看</Button>
                            )}
                        />
                    </Table>
                </div>
            </div>
        )
    }
}
